<!DOCTYPE html>
<html lang="">
  <head>
    <meta charset="utf-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width,initial-scale=1.0" />
    <title>aaaaaaaa</title>
  </head>
  <body>
    <div id="app"></div>
    <!-- built files will be auto injected -->
    <style scoped lang="scss">
      * {
        margin: 0;
        padding: 0;
      }
      .xian {
        border-bottom: 3px solid #256dff;
        width: 1200px;
        display: flex;
        margin: 0 auto;
        margin-top: 2em;
      }
      .tdian {
        width: 20%;
        margin-bottom: -12px;
      }
      .imgl {
        width: 50%;
        margin: 0 auto;
      }
      .ldian {
        border: 1px solid #256dff;
        background-color: #fff;
        width: 20px;
        height: 20px;
        margin: 0 auto;
        border-radius: 10px;
      }
      .banner img {
        width: 100%;
        position: relative;
        top: -3em;
        z-index: -1;
      }
      .fuwu {
        height: 120px;
      }
      .fuwu .h {
        font-size: 1.5em;
      }
      .fuwu p {
        height: 40px;
      }
      #imgboxs {
        width: 1000px;
        margin: 0 auto;
        overflow: hidden;
        height: 100%;
      }

      #topimg {
        width: 180px;
        position: relative;
        left: 40%;
        top: 18%;
      }

      #leftimg {
        width: 200px;
        position: relative;
        top: 15%;
        left: 10%;
      }

      #righttimg {
        width: 300px;
        position: relative;
        top: -8%;
        left: 54%;
      }

      #buttomimg {
        width: 180px;
        position: relative;
        top: -10%;
        left: 40%;
      }
      .fours {
        height: 736px;
      }
      .wenti {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        height: 420px;
      }
      .wenti .sdl img {
        width: 100%;
      }
      .wenti .sdl {
        width: 28%;
        height: 90%;
        box-shadow: 0px 0px 20px 1px gray;
        border-radius: 10px;
        padding: 1em;
      }
      .wenti .sdl:hover {
        transform: scale(1.1);
      }
      .wenti .tet {
        font-size: 1.3em;
        height: 40px;
        line-height: 40px;
      }

      .wenti1 p {
        height: 40px;
        line-height: 40px;
      }
      .wenti1 .itp {
        font-size: 1.4em;
      }
      .jd {
        width: 1200px;
        margin: 0 auto;
        margin-top: 2em;
      }
      .jd p {
        height: 40px;
      }
      .jd p span {
        float: right;
      }
      .jd .h {
        font-size: 1.4em;
      }
      .swp {
        height: 400px;
        display: flex;
      }
      .swp div {
        width: 20%;
        height: 100%;
      }
      .swp div img {
        width: 100%;
        height: 100%;
      }
      .Process {
        width: 1200px;
        margin: 0 auto;
        margin-top: 4em;
        height: 600px;
      }
      .Process .lc {
        font-size: 1.3em;
      }
      .hezuo {
        width: 1300px;
        margin: 0 auto;
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .hezuo div {
        width: 250px;
        margin-top: 1em;
      }
      .hezuo div img {
        width: 100%;
        height: 100%;
        border: 2px solid gray;
      }
      .hzimg div img:hover {
        border: 2px solid orange;
      }
      footer .ftbox {
        width: 50%;
        display: flex;
        justify-content: space-between;
        margin: 0 auto;
      }
      footer {
        margin-top: 4em;
        background-color: #465a74;
        height: 240px;
        color: #fff;
      }
      footer .leftext {
        text-align: left;
        margin-top: 60px;
      }
      footer .leftext p {
        height: 40px;
        line-height: 40px;
        font-size: 1.2em;
      }
      footer .erweima {
        font-size: 1.2em;
        margin-top: 45px;
      }
      .bottom {
        background-color: #2a3c54;
        height: 60px;
        line-height: 60px;
        color: #fff;
        border-top: 1px solid #fff;
      }
      .neirong {
        margin-top: 2em;
      }
      .neib {
        height: 300px;
        box-shadow: 0px 0px 10px 4px #999;
        display: flex;
      }
      .neib .left,
      .neib .right {
        width: 50%;
        margin-top: 40px;
      }
      .neib .left p {
        height: 50px;
      }
      .neib .left .h {
        font-size: 1.2em;
      }
      .hztext p {
        height: 40px;
      }
      .hztext .h {
        font-size: 1.2em;
      }
      li {
        list-style-type: none;
      }
      .uld {
        display: flex;
        justify-content: space-between;
        flex-wrap: wrap;
        margin-top: 2em;
        border-bottom: 2px solid #256dff;
      }
      /* span样式 */
      .oa {
        border: 1px solid #256dff;
        background-color: #256dff;
        display: block;
        width: 20px;
        height: 20px;
        margin: 0 auto;
        border-radius: 10px;
        position: relative;
        top: 12px;
      }
      .ob {
        border: 1px solid #256dff;
        background-color: #fff;
        display: block;
        width: 20px;
        height: 20px;
        margin: 0 auto;
        border-radius: 10px;
        position: relative;
        top: 12px;
      }
      .ba {
        box-shadow: 0px 0px 4px 1px #999;
      }
      .btmbox {
        margin-top: 3em;
        display: flex;
        box-shadow: 0px 0px 4px 1px #999;
        padding: 20px;
      }
      .btm {
        display: flex;
        padding: 20px;
        margin: 0 auto;
      }
      .btm p {
        height: 50px;
        line-height: 50px;
        margin-top: 1em;
      }
      .btm .hed {
        font-size: 1.2em;
      }
      .btm .imgt {
        margin-left: 20px;
      }
      /* 网站开发 */
      #wzkf .dingz {
        display: flex;
        width: 1200px;
        margin: 0 auto;
        height: 200px;
        margin-top: 3em;
      }
      #wzkf .dingz dl {
        width: 25%;
      }
      #wzkf .dingz dl dt {
        margin-top: 50px;
      }
      #wzkf .dingz dl dd {
        height: 50px;
        line-height: 50px;
      }
      .shod {
        box-shadow: 0px 0px 20px 2px #999;
      }
      .shodc {
        border-bottom: 4px solid #256dff;
        width: 100px;
        margin: 0 auto;
      }
      .Sgdimg .gdimg {
        width: 24%;
      }
      .Sgdimg img {
        width: 100%;
      }
      .Sgdimg {
        display: flex;
        width: 1200px;
        margin: 0 auto;
        justify-content: space-between;
      }
      .Sgdimg dl {
        position: relative;
      }
      .Sgdimg dl dd {
        position: absolute;
        top: 40%;
        left: 10%;
        color: #fff;
      }
      .classic {
        height: 900px;
        background-color: #fafafa;
        width: 1200px;
        margin: 0 auto;
      }
      .disp1 h2 {
        height: 50px;
        line-height: 50px;
      }
      .disp1 .line {
        border-bottom: 5px solid #256dff;
        width: 80px;
        margin: 0 auto;
      }
      .disp1 p {
        line-height: 30px;
        color: #999;
      }
      .disp1 {
        display: flex;
      }
      .disp1 img {
        width: 100%;
      }
      .disp1 .left {
        width: 48%;
      }
      .disp1 .disp1img {
        width: 48%;
      }
      /* app开发 */
      .app {
        width: 1200px;
        margin: 0 auto;
      }
      .spans {
        text-align: right;
        height: 80px;
      }
      .spans a {
        color: #999;
        text-decoration: none;
      }
      .swpimg img {
        width: 100%;
      }
      .swpimg {
        display: flex;
        justify-content: space-between;
      }
      .swpimg div {
        width: 31%;
      }
      .swpimg dl {
        position: relative;
      }
      .swpimg dl:hover {
        transform: scale(1.1);
      }
      .swpimg dl dd {
        position: absolute;
        top: 40%;
        font-size: 2em;
        color: #256dff;
      }
      .zdys {
        margin-top: 5em;
      }
      .zdtext .h {
        height: 50px;
        font-size: 1.4em;
      }
      .sjdl {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 3em;
      }
      .sjdl dl {
        width: 25%;
        height: 300px;
        font-size: 1.3em;
        padding: 1em;
      }
      .sjdl dl dd {
        text-align: left;
      }
      .sjdsh {
        box-shadow: 0px 0px 10px 1px #999;
      }
      /* //小程序开发 */
      .zhid {
        background-color: #fafafa;
      }
      .bdxcx {
        width: 1200px;
        margin: 0 auto;
        display: flex;
        justify-content: space-between;
        margin-top: 5em;
      }
      .bdxcx dl {
        width: 28%;
        padding: 20px;
        height: 200px;
        background-color: #fff;
        box-shadow: 0px 0px 10px 1px #999;
        position: relative;
      }
      .bdxcx dl:hover {
        transform: scale(1.1);
      }
      .bdxcx dl dt {
        width: 80px;
        height: 80px;
        position: absolute;
        top: -40px;
        left: 40%;
      }
      .bdxcx dl dt img {
        width: 100%;
      }
      .bdxcx dl dd {
        text-align: left;
        line-height: 30px;
        color: #666;
        margin-top: 10px;
      }
      .bdxcx dl .da {
        text-align: center;
        font-size: 1.4em;
        height: 60px;
        line-height: 60px;
        color: #2a3c54;
      }
      .dianji {
        width: 1200px;
        margin: 0 auto;
      }
      .dianji ul {
        display: flex;
        justify-content: space-between;
      }
      .dianji ul li {
        font-size: 1.4em;
        width: 30%;
      }
      .dianji ul li p {
        width: 100px;
        margin: 0 auto;
      }
      .plaimg {
        display: flex;
        justify-content: space-between;
      }
      .plaimg .left {
        width: 35%;
      }
      .plaimg .left img {
        width: 100%;
      }
      .plaimg .right {
        width: 60%;
      }
      .plaimg .right .bt {
        font-size: 1.5em;
      }
      .plaimg .right .bts {
        text-align: left;
        line-height: 40px;
      }
      .xax {
        border-bottom: 4px solid #000;
      }
      .ash {
        width: 1200px;
        margin: 0 auto;
        display: flex;
      }
      .anli .cont {
        width: 1200px;
        margin: 0 auto;
      }

      .anli .header1 {
        height: 60px;
      }
      .anli .header1 p {
        font-size: 1.4em;
        margin-left: 1em;
        height: 50px;
        line-height: 50px;
      }
      .anli .cont .cont_img .aimg1,
      .anli .cont .cont_img .aimg2 {
        display: flex;
        flex-wrap: wrap;
        justify-content: space-between;
      }
      .borbt {
        border-bottom: 5px solid #000;
      }
      .in12 {
        display: flex;
        width: 150px;
        margin: 0 auto;
        justify-content: space-between;
        margin-top: 2em;
      }

      .in12 span {
        display: block;
        width: 50px;
        height: 50px;
        line-height: 50px;
      }
      .redsa {
        border: 1px solid red;
      }
      .blk {
        border: 1px solid #000;
      }
      .cont_img img {
        margin-top: 2em;
      }
      .cont_img img:hover {
        transform: scale(1.05);
        box-shadow: 0 0 10px 1px #999;
      }
      /* 关于我们 */
      .imgtext {
        width: 1200px;
        margin: 0 auto;
      }
      .imgtexts img {
        width: 100%;
      }
      .imgtexts {
        display: flex;
        position: relative;
        height: 500px;
      }
      .imgtexts .leftimg,
      .imgtexts .texts {
        width: 48%;
      }
      .imgtexts .texts {
        position: absolute;
        left: 40%;
        z-index: -1;
        top: 10%;
        height: 340px;
      }
      .imgtexts .leftimg {
      }
      .imgtexts .texts {
        background-color: #415b76;
        color: #fff;
        padding: 2em;
      }
      .imgtexts .texts .p2 {
        line-height: 30px;
        text-indent: 2em;
      }
      .imgtexts .texts .p1 {
        text-align: left;
        font-size: 1.4em;
        height: 80px;
        line-height: 80px;
      }
      .imgtexts .texts p {
        margin-left: 5em;
      }
      .qywenhua .sm {
        width: 1200px;
        margin: 0 auto;
        margin-top: 2em;
      }
      .smcon {
        display: flex;
        justify-content: space-between;
      }

      .smcon dl {
        width: 30%;
        padding: 1em;
        height: 300px;
      }
      .smcon dl dt {
        width: 120px;
        margin: 0 auto;
        height: 70px;
        padding: 10px;
      }
      .smcon dl dd {
        text-align: left;
        line-height: 30px;
        font-size: 1.2em;
        color: #666;
      }
      .smcon dl .pname {
        text-align: center;
        height: 50px;
        line-height: 50px;
        font-size: 1.5em;
        color: #333;
      }
      .bbc {
        box-shadow: 0 0 10px 1px #256dff;
      }
      .ccc {
        background-color: plum;
        border-radius: 10px;
      }
      .gy4 {
        width: 1200px;
        margin: 0 auto;
      }
      .div4 {
        display: flex;
        justify-content: space-between;
        margin-top: 2em;
      }
      .divfor {
        border: 2px solid #000;
        width: 22%;
        height: 160px;
        border-radius: 10px;
      }
      .divfor .tp1 {
        height: 70px;
        line-height: 70px;
        font-size: 3em;
      }
      .divfor .tp2 {
        height: 50px;
        line-height: 50px;
        font-size: 1.3em;
      }
      .dvclass {
        background-color: #000;
        color: #fff;
      }
      .inputs {
        width: 1200px;
        box-shadow: 0 0 10px 1px #256dff;
        margin: 0 auto;
        margin-top: 6em;

      }
      .inputs .topbox {
        display: flex;
        padding: 2em;
      }
      .inputs .topbox .left {
        width: 50%;
        text-align: left;
      }
      .inputs .topbox .left p {
        height: 80px;
        font-size: 1.4em;
        color: #666;
      }
      .inputs .topbox .left img {
        vertical-align: middle;
      }
      .inputs .topbox .right h1 {
        font-weight: 200;
      }
      .inputs .topbox .right {
        text-align: left;
        width: 50%;
      }
      .inputs .topbox .right input {
        width: 30%;
        height: 40px;
        margin-left: 10px;
      }
      .inputs .topbox .right textarea {
        margin-left: 10px;
        margin-top: 20px;
      }
      .inputs .topbox .right .tijiao {
        height: 100px;
        line-height: 100px;
        width: 80px;
        height: 60px;
        line-height: 60px;
        margin: 0 auto;
        margin-top: 3em;
        text-align: center;
        background-color: #415b76;
        color: #fff;
        border-radius: 10px;
      }
      .inputs .topbox .right form {
        margin-top: 2em;
      }
      .inputs .ditu {
        padding: 2em;
      }
      .inputs .ditu h2 {
        font-weight: 200;
        text-align: left;
        height: 100px;
        line-height: 100px;
      }
      .inputs .dituimg img {
        width: 100%;
      }
    </style>
  </body>
</html>
